<!-- 会员分类 -->
<template>
  <div class="page-container">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="名称">
          <a-input v-model="queryParam.keyword" placeholder="请输入名称" allowClear />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model="queryParam.enabled" allowClear>
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">正常</a-select-option>
            <a-select-option :value="0">禁用</a-select-option>
          </a-select>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div>
        <a-button type="primary" @click="handleShowEditModal({}, 'add')">创建会员分类</a-button>
      </div>
      <a-button type="primary" ghost>职务管理</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id, enabled, title"
      :columns="newColumns"
      :data="loadData"
      :rowSelection="null"
    >
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>

      <!-- 用户类型 -->
      <span slot="formType" slot-scope="text, record, index">
        <DictTag :options="Dict.getLocal('applyTypeDict')" :value="text" isText showBorder />
      </span>

      <!-- 是否对外展示 -->
      <span slot="enabled" slot-scope="text, record">
        <a-switch :defaultChecked="record.enabled === 1" @change="(val) => handleEnabledChange(val, record)" />
      </span>

      <!-- 操作按钮 -->
      <span slot="action" slot-scope="text, record">
        <template>
          <a-button
            v-for="item in _btnList(record)"
            :key="item.text"
            type="primary"
            ghost
            size="small"
            class="_mr-5"
            @click="item.fn"
          >
            {{ item.text }}
          </a-button>
        </template>
      </span>
    </s-table>

    <EditModal ref="editModal" />
  </div>
</template>

<script>
import { STable } from '@/components'
import CustomTable from '@/components/Cuscolumn'
import EditModal from './editModal.vue'
import { MemberTypeList, MemberTypeEnable } from '@/api/member/memberConfig'
import DictTag from '@/components/DictTag'

export default {
  components: {
    STable,
    CustomTable,
    EditModal,
    DictTag
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10,
      },
      queryParam: {
        keyword: undefined,
        enabled: undefined,
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px',
        },
        {
          title: '会员分类名称',
          dataIndex: 'name',
          ellipsis: true,
          width: '100px',
        },
        {
          title: '用户类型',
          dataIndex: 'formType',
          ellipsis: true,
          width: '180px',
          scopedSlots: { customRender: 'formType' },
        },
        {
          title: '排序',
          dataIndex: 'sort',
          ellipsis: true,
          width: '100px',
        },
        {
          title: '是否对外展示',
          dataIndex: 'enabled',
          ellipsis: true,
          width: '150px',
          scopedSlots: { customRender: 'enabled' },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          ellipsis: true,
          width: '200px',
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
          width: '250px',
          scopedSlots: {
            customRender: 'action',
          },
        },
      ],
      pageNum: 1,
      // 加载数据方法 必须为 Promise 对象
      loadData: async (parameter) => {
        this.pagination = {
          current: parameter.pageNum,
          pageSize: parameter.pageSize,
          size: parameter.pageSize,
        }
        return MemberTypeList(Object.assign(this.pagination, this.queryParam))
      }
    }
  },
  computed: {
    newColumns() {
      const currentColumns = this.$store.state.user.customTable;
      if (currentColumns && currentColumns[this.$route.name + '_' + 'Join']) {
        return this.$options.data().columns.filter(v => {
          const _items = currentColumns[this.$route.name + '_' + 'Join'].find((item) => item === v.title || item.title === v.title);
          if(_items) return Object.assign(v,_items)
        }).sort((a,b)=>{return a.tableSort - b.tableSort})
      } else {
        return this.columns
      }
    }
  },
  created() {},
  methods: {
    handleReload() {
      this.$refs.table.refresh()
    },
    handleDetail(row, type) {
      this.$refs.detailModal.show(row, type)
    },
    handleReset() {
      Object.keys(this.queryParam).forEach((k) => {
        this.queryParam[k] = undefined
      })
      this.$refs.table.refresh(true)
    },
    _btnList(record) {
      let oldList = [
        {
          show: true,
          text: '编辑',
          fn: () => this.handleShowEditModal(record, 'edit'),
        },
        {
          show: true,
          text: '会员表单',
          fn: () => this.handleDetail(record, 'approval'),
        },
        {
          show: true,
          text: '删除',
          fn: () => {},
        },
      ]
      return oldList.filter((v) => v.show)
    },
    async handleEnabledChange(val, row) {
      await MemberTypeEnable(row.id, val ? 1 : 0)
      this.$message.success('操作成功')
      this.handleReload()
    },
    handleShowEditModal(row, type) {
      this.$refs.editModal.show({
        row: JSON.stringify(row),
        type,
      })
    },
  },
}
</script>
<style scoped lang="less"></style>
